<template>
	<view class="box">
		<view class="box1">
			<view class="top">
				<view class="heizi_top">
					<span>{{zongjinum.count}}</span>
					<p>本月订单量(单)</p>
				</view>
				<view class="heizi_top">
					<span>{{zongjinum.total_amount}}</span>
					<p>本月订单金额(￥)</p>
				</view>
			</view>
			<view class="inu">
				<view class="" style="display: flex;">
					<uni-icons type="search" size="22"></uni-icons>
					<input style="font-size: 26rpx;" class="uni-input" placeholder="请输入订单号,客户姓名,电话" v-model="params.keyWord" @input="clearInput" />
				</view>
				<uni-icons type="clear" size="24" v-if="showClearIcon" @click="clearIcon"></uni-icons>
			</view>
			<view class="example-body">
				<uni-datetime-picker ref="datetime"  v-model="range" type="daterange" @change="changedata" />
			</view>
			<view class="xuanze">
				<span>
					<picker  @change="xiadanchange" :value="xiadanindex" :range="xiadanarray">
						<view class="uni-input">{{xiadanarray[xiadanindex]}}</view>
					</picker>
					<uni-icons type="down" size="12"></uni-icons>
				</span>
				<span>
					<picker  @change="fahuochange" :value="fahuoindex" :range="fahuoarray">
						<view class="uni-input">{{fahuoarray[fahuoindex]}}</view>
					</picker>
					<uni-icons type="down" size="12"></uni-icons>
				</span>
			</view>
		</view>

		<view class="box2" v-if="!zanwu">
			<view class="hezi" v-for="(item,index) in list" :key="index">
				<view class="dingdanbianhao">
					<span>订单编号：{{item.orderNumber}}</span>
					<p :class="item.deliveryStatus=='已发货'?'bianse':''">{{item.deliveryStatus}}</p>
				</view>
				<view class="name">
					<view class="name_box">
						<view class="left">
							<span>{{item.orderChannel}}</span>
							<p>{{item.productName}}</p>
						</view>
						<view class="right">
							<p><a>￥</a>{{item.totalAmount}}</p>
						</view>
					</view>
					<view class="name_box1">
						<span> 下单数量:{{item.productCount}}</span>
						<p>下单时间:{{item.createTime}}</p>
					</view>
					<view class="name_box1" v-if="item.deliveryName">
						<span>快递:{{item.deliveryName}}</span>
						<p>单号:{{item.deliveryNumber}}</p>
					</view>
				</view>
				
				
				<view class="dizhijilu">
					<view class="left">
						<image src="../../static/ddimg/d4.png" mode=""></image>
					</view>
					<view class="right">
						<span>{{item.deliveryRecipientName}},{{item.deliveryRecipientPhone}}
						</span>
						<p>{{item.deliveryProvince}}{{item.deliveryCity}}{{item.deliveryCounty}}{{item.deliveryAddress}}
						</p>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		
		<view class="kong" v-if="list.length == ''">
			<image class="img" src="../../static/tabbar/kong.png" mode=""></image>
			<view class="text">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listorders,
		collateorders
	} from '@/common/http.api.js';
	import { throttling, chattering } from '@/common/cont.js'
	export default {
		data() {
			return {
				range: '',
				zanwu: false,
				params: {
					payStatus:2,
					createUserRole: '',
					orderChannel: '',
					deliveryStatus: '',
					beginTime: '',
					endTime: '',
					keyWord:'',
					pageNum: 1, //页码
					pageSize: 5, //每页大小
				},
				zongjinum: {},
				list: [],
				xiadanindex: 2,
				xiadanarray: ['平台','自主','下单类型'],
				fahuoindex: 2,
				fahuoarray: [ '未发货','已发货','是否发货', ],
				showClearIcon:false,
			}
		},
		onLoad() {
			this.zongji()
			this.getlist()
		},
		methods: {
			zongji() {
				collateorders({}).then(res => {
					if(res.code == 200){
						this.zongjinum = res.data
					}
				})
			},
			changedata(e) {
				this.params.beginTime = e[0]
				this.params.endTime = e[1]
				this.resout()
				this.getlist()
			},
			clearInput: function(event) {
				this.params.keyWord = event.detail.value
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
					chattering(()=>{
						this.list = []
						this.resout()
						this.getlist()
					},500)
				} else {
					this.showClearIcon = false;
					this.resout()
					this.getlist()
				}
			},
			clearIcon(){
				this.showClearIcon = false;
				this.params.keyWord = ''
				this.resout()
				this.getlist()
			},
			xiadanchange: function(e) {
				this.params.orderChannel = e.detail.value
				this.xiadanindex = e.detail.value
				if (e.detail.value == 2) {
					this.params.orderChannel = ''
				}
				this.resout()
				this.list = []
				this.getlist()
			},
			fahuochange: function(e) {
				this.params.deliveryStatus = e.detail.value
				this.fahuoindex = e.detail.value
				if (e.detail.value == 2) {
					this.params.deliveryStatus = ''
				}
				this.resout()
				this.list = []
				this.getlist()
			},
			getlist() {
				listorders(this.params).then(res => {
					res.rows.forEach((item) => {
						if (item.orderChannel == 0) {
							item.orderChannel = '平台'
						} else {
							item.orderChannel = '自主'
						}
						if (item.deliveryStatus == 0) {
							item.deliveryStatus = '未发货'
						} else {
							item.deliveryStatus = '已发货'
						}
					})
					this.list.push(...res.rows)
					if (this.list.length == 0) {
						this.zanwu = true
					} else {
						this.zanwu = false
					}
					
				})
			},
			onReachBottom(){
				this.params.pageNum ++ 
				this.getlist()
			},
			resout(){
				this.params.pageNum = 1
				this.params.pageSize = 5
			},
	
		}
	}
</script>

<style scoped lang="scss">
	.bianse {
		background: #FAF5E9 !important;
		color: #C18F36 !important;
	}

	.box2 {
		padding-bottom: 50rpx;
	}

	.dizhijilu {
		width: 667rpx;
		height: 92rpx;
		background: #FAF5E9;
		border-radius: 10rpx;
		display: flex;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 23rpx;
		color: #C59747;
		align-items: center;
		margin-top: 20rpx;

		image {
			width: 34rpx;
			height: 34rpx;
			margin: 0rpx 10rpx;
		}
	}

	.name_box1 {
		display: flex;
		justify-content: space-between;
		width: 70%;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #777777;
		margin: 14rpx 0rpx;
	}

	.name_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.left {
			display: flex;
			align-items: flex-end;

			span {
				display: flex;
				background: linear-gradient(0deg, #F2D19A 0%, #F5E0BD 100%);
				border-radius: 6rpx;
				font-family: Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 20rpx;
				color: #773B00;
				padding: 5rpx;
				margin-right: 10rpx;
			}

			p {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #141414;
			}
		}

		.right {
			p {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #BC7E13;
			}

			a {
				font-size: 22rpx;
			}
		}
	}

	.hezi {
		width: 680rpx;
		height: 305rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		padding-top: 0rpx;

		.dingdanbianhao {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eeeeee;
			height: 80rpx;
			align-items: center;

			span {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}

			p {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90rpx;
				height: 35rpx;
				background: #F7F7F7;
				border-radius: 4rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #A8A8A8;
			}
		}
	}

	.example-body {
		width: 92%;
		display: flex;
		align-items: center;
		// padding-bottom: 30rpx;
		margin-top: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #464646;
		display: flex;
		align-items: center;
	}

	.xuanze {
		width: 670rpx;
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		span {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #464646;
			display: flex;
			align-items: center;
			width: 140rpx;
			text-align: center;
		}
	}

	.box1 {
		background-color: #ffffff;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
	}

	.inu {
		display: flex;
		width: 650rpx;
		height: 70rpx;
		background: #F6F6F6;
		border-radius: 35rpx;
		align-items: center;
		margin-top: 40rpx;
		justify-content: space-between;
		padding: 0 20rpx;

		input {
			width: 540rpx;
			margin-left: 20rpx;
		}
	}

	.top {
		width: 700rpx;
		display: flex;
		justify-content: space-between;

		.heizi_top {
			width: 343rpx;
			height: 136rpx;
			background: linear-gradient(82deg, #F2D099 0%, #F5E0BD 100%);
			border-radius: 20rpx;
			line-height: 60rpx;
			padding-top: 10rpx;

			span {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #773B00;
				margin-left: 20rpx;
			}

			p {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #773B00;
				margin-left: 20rpx;
			}
		}
	}
</style>